<script type="text/javascript" src="<?=base_url()?>/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="<?=base_url()?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?=base_url()?>/js/jquery.galleryview-3.0-dev.js"></script>
<div class="ui-widget-content ui-corner-all">
	<h3 class="widget-header ui-widget-header ui-corner-all">Meeting Management</h3>
	<div class="widget-content">
		<div class="information-course">
			<h3 class="course-infromation-title">Information</h3>
			<div class="information-course-title">Start date:</div>
			<div class="start-date course-information">25/7/2012</div>
			<div class="information-course-title">End date:</div>
			<div class="end-date course-information">27/8/2012</div>
			<div class="information-course-title">Trainer:</div>
			<div class="trainer course-information">External</div>
			<div class="information-course-title">Target Group:</div>
			<div class="target-group course-information">Factory Overhead</div>
			<div class="information-course-title">Method:</div>
			<div class="method course-information">Class</div>
			<div class="information-course-title">Number of trainees:</div>
			<div class="number-of-trainees course-information">4</div>
			<div class="information-course-title">Training place:</div>
			<div class="training-place course-information"><a href="<?=base_url()?>index.php/home/facilities_detail">Self-learning center</a></div>
			<div class="information-course-title">Status:</div>
			<div class="status course-information">Planned</div>
		</div>
		<div class="trainee-list">
			<h3 class="course-infromation-title">Trainee List</h3>
			<div class="list-content">
				<table class="list" width="70%">
					<thead>
						<tr>
							<th>No</th>
							<th>Name</th>
							<th>Ecode</th>
							<th>Department</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th>No</th>
							<th>Name</th>
							<th>Ecode</th>
							<th>Department</th>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td class="center">1</td>
							<td>Pham Thanh Tung</td>
							<td class="center">23433</td>
							<td>Human Resource Operation</td>
						</tr>
						<tr>
							<td class="center">2</td>
							<td>Nguyen Minh Ngoc</td>
							<td class="center">27542</td>
							<td>Human Resource Operation</td>
						</tr>
						<tr>
							<td class="center">3</td>
							<td>Nguyen Thi Thu Hien</td>
							<td class="center">36543</td>
							<td>Human Resource Operation</td>
						</tr>
						<tr>
							<td class="center">4</td>
							<td>Nguyen Huu Thien Y</td>
							<td class="center">36744</td>
							<td>Human Resource Operation</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="course-document">
			<h3 class="course-infromation-title">Material</h3>
			<div class="download-title">Download material here:</div>
			<a href="<?=base_url()?>index.php/home/Jprofile_material"><img class="download" src="<?=base_url()?>images/icon/download.png"></a>
		</div>
	</div>
</div>
<script>
	$('.list').dataTable({
		"bLengthChange": false,
        "sScrollY": "200",
        "bJQueryUI": true,
        "sDom": '<"toolbar">frtip',
        "iDisplayLength": "100",
        "bInfo": false,
        "aoColumns":[
        	{"sWidth": '10%',"bSortable": false},
        	{"sWidth": '20%'},
        	{"sWidth": '30%'},
        	{"sWidth": '20%'}
        ]
    });

    $(".list tbody tr").each(function(){
    	$(this).mouseover(function(){
    		$(this).addClass("ui-state-active");
    	}).mouseout(function(){
    		$(this).removeClass("ui-state-active");
    	});
    })
</script>